<template>
  <div v-if="song" class="playerContainer">
    <div class="playControl_inn">
      <div class="control_out">
        <!-- <div class="lock">
          <i class="iconfont ">锁定图标</i>
        </div> -->
        <div class="controlContent">
          <div class="control_l">
            <div class="cover">
              <a>
                <img :src="song.albumpic" alt="" @click="handler">
              </a>
            </div>
            <div class="control_l_center">
              <div class="center-header">
                <div class="songInfo">
                  <span>{{ song.name }}</span>
                  <span>-{{ song.artist }}</span>
                </div>
                <div class="songTime">
                  <span class="currentTime">{{ currentTime }}</span>&nbsp;
                  <span class="durationTime">{{ song.songTimeMinutes }}</span>
                </div>
              </div>
              <div ref="processBar" class="processBar">
                <div class="barInner">
                  <div class="processCurrent" :style="{width:currentWidth + '%'}" />
                  <div class="processBtn" :style="{left:currentWidth + '%'}">
                    <div class="circle" @mousedown="handleDown" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="control_c">
            <div class="prev" title="上一首" @click="changeType('pre')">
              <i class="iconfont icon-shangyishoushangyige" />
            </div>
            <div class="play" title="暂停" @click="triggerPlay">
              <i v-if="playState" class="iconfont icon-bofang" />
              <i v-else class="iconfont icon-bofang1" />
            </div>
            <div class="next" title="下一首" @click="changeType('next')">
              <i class="iconfont icon-xiayigexiayishou" />
            </div>
          </div>
          <div class="control_r">
            <i title="收藏歌曲" class="iconfont icon-aixin" />
            <i title="下载歌曲" class="iconfont icon-xiazai" />
            <i title="评论歌曲" class="iconfont icon-duihuaxinxi" />
            <span class="bofangType">
              <i title="循环播放" class="iconfont icon--24gl-repeat2" />
              <!-- <i title="单曲循环" class="iconfont icon-aixin"></i>
              <i title="顺序播放" class="iconfont icon-aixin"></i>
              <i title="随机播放" class="iconfont icon-aixin"></i> -->
            </span>
            <span class="playList">
              <span class="playCount">29</span>
              <i title="歌曲列表" class="iconfont icon-24gl-playlistMusic4" />
            </span>
            <span class="type">
              <span class="pinzhi">高品</span>
              <i class="iconfont icon-arrow-down" />
            </span>
            <span class="shengyin">
              <i class="iconfont icon-shengyin" />
            </span>
            <div class="yinliang">
              <div class="yinliangBar">
                <div class="yinliangInner">
                  <div class="yinliangCurrent" />
                  <div class="yinliangBtn">
                    <div class="yinliangcircle" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Player',
  props: {
    isPlay: {
      type: Boolean,
      default: false
    },
    song: {
      type: Object,
      default: () => ({})
    },
    currentSongTime: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      playState: this.isPlay,
      currentWidth: 0,
      flag: false // 控制进度条是否移动
    }
  },
  computed: {
    // scale() {
    //   return this.currentSongTime / this.song.duration * 100
    // },
    currentTime() {
      return this.$moment(this.currentSongTime * 1000).format('mm : ss')
    }
  },
  watch: {
    isPlay: {
      immediate: true,
      handler(val) {
        this.playState = val
      }
    },
    currentSongTime(val) {
      if (this.flag) return
      this.currentWidth = val / this.song.duration * 100
    }
  },
  methods: {
    // 处理进度条移动
    handleDown() {
      const { offsetLeft, clientWidth } = this.$refs.processBar
      this.flag = true
      window.onmousemove = (event) => {
        this.currentWidth = (event.clientX - offsetLeft) / clientWidth * 100
      }
      window.onmouseup = () => {
        window.onmousemove = null
        this.$emit('sendScale', this.currentWidth / 100)
        this.flag = false
      }
    },
    // 歌曲播放暂停状态
    triggerPlay() {
      this.playState = !this.playState
      this.$bus.$emit('triggerPlay', this.playState)
    },
    // 切换歌曲
    changeType(type) {
      this.$emit('changeType', type)
    },
    handler() {
      console.log(this.$router);
      this.$router.push({name:'playmusic',params:{'mid':this.song.rid}})
    }
  }
}
</script>

<style lang="less" scoped>
  .playerContainer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    padding-top:20px;
    // box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .playControl_inn{
      width:100%;
      background-color: #fff;
      box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);
      .control_out{
        position: relative;
        max-width:100%;
        padding: 0 120px;
        height: 100%;
        margin: 0 auto;
        background: #fff;
      }
      .controlContent{
        display: flex;
        height: 100%;
        justify-content: space-between;
        .control_l{
          display: flex;
          align-items: center;
          width: 460px;
          flex-shrink: 0;
          img{
            width: 70px;
            height: 70px;
            margin-right:20px;
          }
          .control_l_center{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 36px;
              .center-header{
                width: 370px;
                display: flex;
                font-size:14px;
                justify-content: space-between;
              }
              .processBar{
                position: relative;
                width: 370px;
                height: 3px;
                border-radius: 2px;
                cursor:pointer;
                background: rgba(0,0,0,.05);
                .barInner{
                  position: absolute;
                  top:0;
                  left: 0;
                  display: flex;
                  width: 370px;
                  align-items: center;
                  .processCurrent{
                    width: 0;
                    background-color: #ffdf1f;
                    height: 3px;
                    border-radius: 2px;
                  }
                  .processBtn{
                    position: absolute;
                    z-index: 100;
                    left: 0;
                    width: 12px;
                    height: 12px;
                    top:-4px;
                    background-color: #fff;
                    box-shadow: 0 0 15px 0 rgb(0 0 0 / 15%);;
                    border-radius: 50%;
                    .circle{
                      position: absolute;
                      top:2.5px;
                      left: 2.5px;
                      width: 6px;
                      height: 6px;
                      border-radius: 50%;
                      background-color: #ffdf1f;
                    }
                  }
                }

              }
          }

        }
        .control_c{
          flex-shrink: 0;
          width: 164px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          i{
            font-size: 24px;
          }
          .prev,.play,.next{
            width: 28px;
            text-align: center;
            cursor: pointer;
          }
          .play{
            i{
              font-size: 35px;
            }
          }
        }
        .control_r{
          width: 460px;
          height: 100%;
          display: flex;
          justify-content:flex-end;
          align-items:center ;
          flex-shrink: 0;
          i{
            font-size: 18px;
            margin-left: 28px;
            cursor: pointer;
          }
          .playList{
            position:relative;
            .playCount{
              position:absolute;
              right:-10px;
              top:-10px;
            }
            i{
              cursor: pointer;
              margin:0 0 28px ;
            }

          }
          .type{
            position: relative;
            display: inline-block;
            width: 62px;
            height: 23px;
            text-align: center;
            line-height: 23px;
            padding-right:15px;
            margin-left: 30px;
            font-size: 12px;
            border: 1px solid #333;
            border-radius:17px ;
            i{
              font-size: 14px;
              position: absolute;
              right:4px;
              cursor: pointer;
            }
          }
          .shengyin i{
            font-size: 24px;
          }
          .yinliang{
            margin-left: 5px;
            width: 200px;
            .yinliangBar{
              position: relative;
              width: 100px;
              height: 3px;
              background: rgba(0,0,0,.05);
              .yinliangInner{
                  // position: relative;
                  display: flex;
                  align-items: center;
                  .yinliangCurrent{
                    position: relative;
                    width: 50px;
                    background-color: #ffdf1f;
                    height: 3px;
                    border-radius: 2px;

                  }
                  .yinliangBtn{
                   position: absolute;
                    z-index: 100;
                    right:50px;
                    width: 12px;
                    height: 12px;
                    top:-4px;
                    background-color: #fff;
                    box-shadow: 0 0 15px 0 rgb(0 0 0 / 15%);;
                    border-radius: 50%;
                    .yinliangcircle{
                      position: absolute;
                      top: 50%;
                      left: 50%;
                      transform: translate(-50%,-50%);
                      width: 4px;
                      height: 4px;
                      background: #ffdf1f;
                      border-radius: 50%;
                    }
                  }
              }
            }
          }
        }
      }
    }
  }
</style>
